<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline filter-container">
      <el-form-item prop="time" label="操作时间">
        <el-date-picker
          v-model="form.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="部门类别：">
        <el-select v-model="form.department">
          <el-option v-for="item in departmentList"
                     :key="item.departmentId"
                     :label="item.name"
                     :value="item.departmentId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="账户名：">
        <el-input v-model="form.username" style="width: 100px;"/>
      </el-form-item>
      <el-form-item label="IP：">
        <el-input v-model="form.ip" style="width: 100px;"/>
      </el-form-item>
      <el-button type="primary" v-waves icon="el-icon-search" @click="()=>submitFilterForm(filters)">搜索</el-button>
    </el-form>


    <el-table :data="tableData.list" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="账户名" align="center" prop="username">
      </el-table-column>
      <el-table-column label="部门类别" align="center" prop="departName">
      </el-table-column>
      <el-table-column label="日志内容" align="center" prop="content">
      </el-table-column>
      <el-table-column label="IP" align="center" prop="ip">
      </el-table-column>
      <el-table-column label="操作时间" align="center">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {form, grid} from '@/build';

  import {authDepartmentGetApi} from '@/services/api/permission'

  import {
    logListApi as listApi,
  } from '@/services/api/system';

  export default {
    name: 'op-log',

    mixins: [form, grid],

    // components: {
    //   AdvertisingEdit,
    // },

    data() {
      // 本周 即 当前周 周一至今
      const weekTime = [moment().startOf('isoWeek').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
      return {
        form: {
          time: weekTime,
          username: undefined,
          ip: undefined,
          department: undefined,
        },
        filters: {
          startTime: weekTime[0],
          endTime: weekTime[1],
          page: 1,
          size: 20
        },
        tableData: {
          list: [],
          total: 0
        },
        departmentList: [],
      }
    },

    methods: {
      submitFilterForm() {
        const {time,username,ip,department} = this.form;
        let startTime = undefined, endTime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          startTime = time[0];
          endTime = time[1];
        }
        this.filters = {...this.filters, ...this.form, startTime, endTime,username,ip,department}
        this.getAll()
      },
    },

    mounted() {
      this.bindGet(authDepartmentGetApi, 'departmentList')
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.getAll();
    }
  }
</script>
